<template>
  <div class="game-view">
    <!-- 横屏提示覆盖层 -->
    <div v-if="showOrientationTip" class="orientation-tip-overlay" @click="dismissOrientationTip">
      <div class="orientation-tip-content">
        <div class="phone-icon">📱</div>
        <div class="tip-title">建议横屏游戏</div>
        <div class="tip-text">横屏可获得更好的游戏体验</div>
        <div class="rotation-icon">🔄</div>
        <button class="dismiss-btn" @click="dismissOrientationTip">我知道了</button>
      </div>
    </div>
    
    <!-- 加载状态 -->
    <div v-if="isLoading" class="loading-overlay">
      <div class="loading-content">
        <div class="loading-title">🃏 宣坨坨</div>
        <div class="loading-subtitle">正在准备游戏</div>
        
        <!-- 卡牌洗牌动画 -->
        <div class="card-shuffle-animation">
          <div class="card-stack">
            <div v-for="i in 5" :key="i" class="animated-card" :style="{ '--delay': i * 0.2 + 's' }">
              <div class="card-face">
                <span class="card-suit">{{ getSuitSymbol(i) }}</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 加载进度条 -->
        <div class="progress-container">
          <div class="progress-bar">
            <div class="progress-fill" :style="{ width: loadingProgress + '%' }"></div>
          </div>
          <div class="progress-text">{{ loadingStage }}</div>
        </div>
        
        <!-- 动态提示文字 -->
        <div class="loading-tips">
          <div class="tip-text">{{ currentTip }}</div>
        </div>
        
        <!-- 装饰性扑克牌飞舞 -->
        <div class="floating-cards">
          <div v-for="i in 8" :key="i" class="floating-card" :style="getFloatingCardStyle(i)">
            {{ getRandomSuit() }}
          </div>
        </div>
      </div>
    </div>
    
    <!-- 游戏内容 -->
    <div v-else class="game-content">
      <!-- 游戏主区域 -->
      <div class="game-main full-width">
      <!-- 顶部信息栏 -->
      <div class="game-header">
      <div class="round-info">第 {{ roundInfo.round }} 轮</div>
      <!-- 首发玩家提示 -->
      <div v-if="firstPlayerInfo && firstPlayerInfo.isFirstRound" class="first-player-info">
        <span class="dice-icon">🎲</span>
        <span class="first-text">{{ firstPlayerInfo.player.name }}首出</span>
      </div>
      <!-- 玩家收牌信息 -->
      <div class="player-collected-info-top">
        收牌: {{ collectedStats[currentPlayer?.id] || 0 }}
      </div>
      <div class="star-coins enhanced-coins">
        <span class="coin-icon">💰</span>
        <span class="coin-amount">{{ currentPlayer?.starCoins || 0 }}</span>
        <div class="coin-glow"></div>
      </div>
      <div class="header-buttons">
        <button class="audio-icon" @click="toggleSfx" :title="isSfxEnabled ? '关闭语音' : '开启语音'">
          <span>{{ isSfxEnabled ? '🗣️' : '🔇' }}</span>
        </button>
        <button class="music-icon" @click="toggleMusic" :title="isMusicEnabled ? '关闭音乐' : '开启音乐'">
          <span>{{ isMusicEnabled ? '🎵' : '🔈' }}</span>
        </button>
        <button class="history-icon" :class="{ active: showHistoryDialog }" @click="toggleHistoryDialog" title="查看出牌记录">
          <span>📜</span>
          <span class="badge" v-if="playHistory.length > 0">{{ playHistory.length }}</span>
        </button>
        <button class="rules-icon" @click="showRules = true" title="游戏规则">
          <span>📖</span>
        </button>
        <button class="end-game-icon" @click="confirmEndGame" title="结束游戏">
          <span>✕</span>
        </button>
      </div>
    </div>

    <!-- AI玩家信息 - 紧凑布局 -->
    <div class="ai-players-compact">
      <div v-for="player in sortedOtherPlayers" :key="player.id" class="ai-player-mini">
        <!-- 头像和基本信息 -->
        <div class="ai-avatar-wrapper">
          <div class="ai-avatar">{{ player.avatar }}</div>
          <!-- 收牌数量徽章 -->
          <div class="ai-collected-badge">{{ collectedStats[player.id] || 0 }}</div>
        </div>
        <!-- 简化信息 -->
        <div class="ai-info-mini">
          <div class="ai-name">{{ player.name }}</div>
          <div class="ai-cards-count">{{ player.cards.length }}张</div>
        </div>
      </div>
    </div>

    <!-- 出牌区域 -->
    <div class="play-area">
      <!-- 其他玩家的出牌 -->
      <div class="other-plays">
        <div v-for="play in roundCards.filter(p => p.player.id !== currentPlayer?.id)" 
             :key="play.player.id" 
             class="player-play"
             :class="getPlayerPosition(getStorePlayer(play.player))">
          <div class="player-label">{{ getStorePlayer(play.player).name }}</div>
          <div v-if="play.passed" class="pass-indicator">扣牌</div>
          <div v-else class="cards-group">
            <div 
              v-for="card in play.cards" 
              :key="card.id" 
              :class="getCardClass(card).concat(['small'])"
            >
              <div class="card-rank">{{ card.rank }}</div>
              <div class="card-symbol" :style="{ color: safeGetCardColor(card) }">
                {{ safeGetCardSymbol(card) }}
              </div>
              <div class="card-name">{{ card.displayName }}</div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 自己的出牌 -->
      <div class="my-play" v-if="roundCards.find(p => p.player.id === currentPlayer?.id)">
        <div class="player-label">你的出牌</div>
        <div v-if="roundCards.find(p => p.player.id === currentPlayer?.id)?.passed" class="pass-indicator">扣牌</div>
        <div v-else class="cards-group">
          <div 
            v-for="card in roundCards.find(p => p.player.id === currentPlayer?.id)?.cards || []" 
            :key="card.id" 
            :class="getCardClass(card).concat(['small'])"
          >
            <div class="card-rank">{{ card.rank }}</div>
            <div class="card-symbol" :style="{ color: safeGetCardColor(card) }">
              {{ safeGetCardSymbol(card) }}
            </div>
            <div class="card-name">{{ card.displayName }}</div>
          </div>
        </div>
      </div>
      
      <div v-if="isMyTurn" class="turn-indicator">
        <div v-if="canPass && roundCards.length > 0">
          <div >
            轮到你出牌或扣牌
          </div>
        </div>
        <div v-else>
          轮到你出牌
        </div>
      </div>
      
      <!-- 轮次结果显示提示 -->
      <div v-if="gameStore.showingRoundResult" class="round-result-indicator">
        <div class="result-message">{{ message }}</div>
      </div>
      
      <!-- 通用消息提示（错误、警告等） -->
      <div v-if="message && message.trim() && !gameStore.showingRoundResult && !waitingForCollection" 
           class="general-message-indicator" 
           :class="['message-' + messageType]">
        <div class="message-content">
          <span v-if="messageType === 'error'" class="message-icon">⚠️</span>
          <span v-else-if="messageType === 'success'" class="message-icon">✅</span>
          <span v-else class="message-icon">ℹ️</span>
          <span class="message-text">{{ message }}</span>
        </div>
      </div>
      
      <!-- 收牌Toast提示 -->
      <div v-if="waitingForCollection" class="collect-toast">
        <div class="toast-content">
          <div class="winner-badge">🏆</div>
          <div class="toast-text">
            <span class="winner-name">{{ roundWinner?.name || '无人' }}</span> 赢得本轮
            <span class="collect-count">收取 {{ roundCards[0]?.cards.length * 3 || 0 }} 张牌</span>
          </div>
          <div class="countdown-circle">
            <span class="countdown-number">{{ collectCountdown ?? 3 }}</span>
          </div>
        </div>
        <button class="toast-collect-btn" @click="collectCards">
          立即收牌
        </button>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons" :class="{ invisible: waitingForCollection }">
      <button 
        class="btn btn-warning" 
        @click="kouLe"
        :disabled="!canKouLe || waitingForCollection"
        v-if="isMyTurn && roundCards.length === 0"
      >
        扣了
      </button>
      <button 
        class="btn btn-secondary" 
        @click="pass"
        :disabled="!canPass || waitingForCollection"
      >
        扣牌{{ getPassButtonText }}
      </button>
      <button 
        class="btn btn-primary" 
        @click="playCards"
        :disabled="!canPlay || waitingForCollection"
      >
        出牌 {{ selectedCards.length > 0 ? `(${selectedCards.length})` : '' }}
      </button>
    </div>

    <!-- 玩家手牌 -->
    <div class="player-hand">
      <!-- 移除收牌信息，给手牌更多空间 -->
      <div class="cards-container">
        <div 
          v-for="card in currentPlayer?.cards || []" 
          :key="card.id" 
          :class="getCardClass(card).concat(isCardSelected(card) ? ['selected'] : [])"
          @click="toggleCard(card)"
        >
          <div class="card-rank">{{ card.rank }}</div>
          <div class="card-symbol" :style="{ color: safeGetCardColor(card) }">
            {{ safeGetCardSymbol(card) }}
          </div>
          <div class="card-name">{{ card.displayName }}</div>
        </div>
      </div>
    </div>

    </div><!-- game-main结束 -->
    
    <!-- 移动端历史记录面板 -->
    <div class="mobile-history-panel" :class="{ expanded: historyExpanded }" v-show="historyVisible">
      <div class="history-handle" @click="toggleHistory">
        <div class="handle-icon"></div>
        <span>出牌记录</span>
      </div>
      <div class="mobile-history-content">
        <div class="history-list">
          <div v-for="(round, index) in playHistory" :key="index" class="round-history">
            <div class="round-header">
              第{{ round.round }}轮 - {{ round.winner }}赢 (收{{ round.collected }}张)
            </div>
            <div class="round-plays">
              <div v-for="(play, pIndex) in round.plays" :key="pIndex" class="play-item">
                <span class="player-name">{{ play.player }}:</span>
                <span v-if="play.passed" class="passed">扣牌</span>
                <span v-else class="cards">
                  <span v-for="card in play.cards" :key="card.id" class="card-display">
                    <span class="card-symbol" :style="{ color: safeGetCardColor(card) }">{{ safeGetCardSymbol(card) }}</span>
                    <span class="card-rank">{{ card.rank }}</span>
                  </span>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    
    <!-- 出牌记录对话框 -->
    <div v-if="showHistoryDialog" class="history-dialog-overlay" @click.self="closeHistoryDialog">
      <div class="history-dialog">
        <div class="dialog-header">
          <h3>📜 出牌记录</h3>
          <button class="close-btn" @click="closeHistoryDialog">✕</button>
        </div>
        <div class="history-content">
          <div v-if="playHistory.length === 0" class="empty-history">
            <div class="empty-icon">🃏</div>
            <div class="empty-text">还没有出牌记录</div>
          </div>
          <div v-else class="history-list enhanced">
            <div v-for="(round, index) in playHistory" :key="index" class="round-history enhanced">
              <div class="round-header enhanced">
                <span class="round-number">第{{ round.round }}轮</span>
                <span class="round-winner">🏆 {{ round.winner }}赢</span>
                <span class="round-collected">收{{ round.collected }}张</span>
              </div>
              <div class="round-plays">
                <div v-for="(play, pIndex) in round.plays" :key="pIndex" class="play-item enhanced">
                  <div class="player-info">
                    <span class="player-avatar">{{ getPlayerAvatar(play.player) }}</span>
                    <span class="player-name">{{ play.player }}</span>
                  </div>
                  <div class="play-cards">
                    <span v-if="play.passed" class="passed-indicator">扣牌</span>
                    <div v-else class="cards-grid">
                      <span v-for="card in play.cards" :key="card.id" class="card-chip">
                        <span class="card-symbol" :style="{ color: safeGetCardColor(card) }">{{ safeGetCardSymbol(card) }}</span>
                        <span class="card-value">{{ card.rank }}</span>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <GameRules :visible="showRules" @close="showRules = false" />
    
    <!-- 无相弹窗 -->
    <WuxiangDialog 
      :visible="gameStore.showWuxiangDialog"
      :wuxiang-player="gameStore.wuxiangPlayer"
      :players="gameStore.players"
      :countdown="gameStore.wuxiangCountdown"
      @close="gameStore.closeWuxiangDialog"
    />
    
    <!-- 扣了决策弹窗 -->
    <KouLeDialog
      :visible="showKouLeDialog"
      :initiator="kouLeInitiator"
      :countdown="kouLeCountdown"
      :decisions="kouLeDecisions"
      :players="gameStore.players"
      @close="gameStore.showKouLeDialog = false"
    />
    
    <!-- 结束游戏确认对话框 -->
    <div v-if="showEndGameDialog" class="dialog-overlay" @click.self="cancelEndGame">
      <div class="dialog-content">
        <h3>确认结束游戏？</h3>
        <p>结束游戏将返回主菜单，当前进度将不会保存。</p>
        <div class="dialog-buttons">
          <button class="btn btn-secondary" @click="cancelEndGame">继续游戏</button>
          <button class="btn btn-danger" @click="endGame">结束游戏</button>
        </div>
      </div>
    </div>
    </div><!-- game-content结束 -->
  </div>
</template>

<script setup>
import { computed, watch, ref, onMounted, onUnmounted } from 'vue';
import { useGameStore } from '../store/game';
import { useMultiplayerStore } from '../store/multiplayer';
import GameRules from '../components/GameRules.vue';
import WuxiangDialog from '../components/WuxiangDialog.vue';
import KouLeDialog from '../components/KouLeDialog.vue';
import { audioManager } from '../utils/AudioManager.js';

const gameStore = useGameStore();
const multiplayerStore = useMultiplayerStore();
const showRules = ref(false);
const showHistoryDialog = ref(false); // 历史记录对话框状态
const historyExpanded = ref(false);
const historyVisible = ref(false);
const showEndGameDialog = ref(false);

// 横屏检测相关状态
const isMobile = ref(false);
const isLandscape = ref(false);
const showOrientationTip = ref(false);

// 音频状态的响应式引用
const isMusicEnabled = ref(audioManager.isMusicEnabled);
const isSfxEnabled = ref(audioManager.isSfxEnabled);

// 加载相关状态
const loadingProgress = ref(0);
const loadingStage = ref('准备游戏数据...');
const currentTip = ref('柳林传统扑克游戏，体验原汁原味的宣坨坨');
const loadingTips = [
  '柳林传统扑克游戏，体验原汁原味的宣坨坨',
  '正在洗牌中，请稍候...',
  '准备AI玩家策略...',
  '分发手牌中...',
  '即将开始游戏，祝你好运！'
];
let tipInterval = null;

// 计算属性
const gameEngine = computed(() => gameStore.gameEngine);
const currentPlayer = computed(() => gameStore.currentPlayer);
const otherPlayers = computed(() => gameStore.otherPlayers);
const isMyTurn = computed(() => gameStore.isMyTurn);
const canPlay = computed(() => gameStore.canPlay);
const canPass = computed(() => gameStore.canPass);
const selectedCards = computed(() => gameStore.selectedCards);
const roundCards = computed(() => gameStore.roundCards);
const collectedStats = computed(() => gameStore.collectedStats);
const roundInfo = computed(() => gameStore.roundInfo);
const message = computed(() => gameStore.message);
const messageType = computed(() => gameStore.messageType);
const playHistory = computed(() => gameStore.playHistory);
const waitingForCollection = computed(() => gameStore.waitingForCollection);
const roundWinner = computed(() => gameStore.roundWinner);
const collectCountdown = computed(() => gameStore.collectCountdown);
const firstPlayerInfo = computed(() => gameStore.firstPlayerInfo);

// 扣了相关计算属性
const canKouLe = computed(() => gameStore.canInitiateKouLe);
const isKouLeActive = computed(() => gameStore.isKouLeActive);
const kouLeInitiator = computed(() => gameStore.kouLeInitiator);
const kouLeCountdown = computed(() => gameStore.kouLeCountdown);
const kouLeDecisions = computed(() => gameStore.kouLeDecisions);
const showKouLeDialog = computed(() => gameStore.showKouLeDialog);

// 获取卡牌的CSS类名
const getCardClass = (card) => {
  const classes = [];
  
  // 基础类名
  classes.push('card');
  
  // 根据花色或displayName添加颜色类
  if (['hearts', 'diamonds'].includes(card.suit)) {
    classes.push('red-card');
  } else if (['spades', 'clubs'].includes(card.suit)) {
    classes.push('black-card');
  } else if (card.displayName === '大王') {
    classes.push('red-card'); // 大王使用红色样式
  } else if (card.displayName === '小王') {
    classes.push('black-card'); // 小王使用黑色样式
  }
  
  return classes;
};

// 计算玩家相对于当前玩家的座位差值（顺时针方向）
const getRelativeSeatIndex = (player) => {
  const currentSeat = currentPlayer.value?.seatIndex;
  const playerSeat = player?.seatIndex;
  if (typeof currentSeat !== 'number' || typeof playerSeat !== 'number') {
    return null;
  }
  return (playerSeat - currentSeat + 3) % 3;
};

// 按照界面显示顺序排序其他玩家（2=左手边显示在左，1=右手边显示在右）
const sortedOtherPlayers = computed(() => {
  if (!otherPlayers.value) return [];

  return [...otherPlayers.value].sort((a, b) => {
    const relA = getRelativeSeatIndex(a);
    const relB = getRelativeSeatIndex(b);

    if (relA === null && relB === null) return 0;
    if (relA === null) return 1;
    if (relB === null) return -1;

    // 改为降序排列：相对座位2（左边）排在前面，相对座位1（右边）排在后面
    // 这样sortedOtherPlayers[0]是左边玩家，sortedOtherPlayers[1]是右边玩家
    return relB - relA;
  });
});

// 扣牌按钮文本
const getPassButtonText = computed(() => {
  if (!canPass.value || !roundCards.value.length) return '';
  
  const requiredCount = roundCards.value[0]?.cards.length || 1;
  const selectedCount = selectedCards.value.length;
  
  if (requiredCount === 1) {
    return selectedCount > 0 ? ` (${selectedCount}/1)` : '';
  } else {
    return ` (${selectedCount}/${requiredCount})`;
  }
});

// 加载状态判断 - 彻底重构避免循环依赖
const isLoading = computed(() => {
  // 第一优先级：明确的loading状态
  if (gameStore.gameStatus === 'loading') {
    return true;
  }
  
  // 第二优先级：playing状态但核心数据缺失
  if (gameStore.gameStatus === 'playing') {
    // 只检查最基础的数据，避免深度访问导致的循环依赖
    return !gameStore.gameEngine || !gameStore.currentPlayer;
  }
  
  // 其他状态一律不显示加载
  return false;
});

// 加载动画相关方法
const getSuitSymbol = (index) => {
  const suits = ['♠️', '♥️', '♣️', '♦️', '🃏'];
  return suits[index - 1];
};

const getRandomSuit = () => {
  const suits = ['♠️', '♥️', '♣️', '♦️'];
  return suits[Math.floor(Math.random() * suits.length)];
};

const getFloatingCardStyle = (index) => {
  const delay = index * 0.5;
  const duration = 3 + Math.random() * 2;
  const startX = Math.random() * 100;
  const startY = Math.random() * 100;
  
  return {
    '--delay': delay + 's',
    '--duration': duration + 's',
    '--start-x': startX + '%',
    '--start-y': startY + '%',
    left: startX + '%',
    top: startY + '%'
  };
};

// 启动加载动画
const startLoadingAnimation = () => {
  loadingProgress.value = 0;
  loadingStage.value = '准备游戏数据...';
  
  // 进度条动画
  const progressInterval = setInterval(() => {
    if (loadingProgress.value < 90) {
      loadingProgress.value += Math.random() * 15;
      if (loadingProgress.value > 90) {
        loadingProgress.value = 90;
      }
    }
  }, 200);
  
  // 提示文字轮换
  let tipIndex = 0;
  tipInterval = setInterval(() => {
    tipIndex = (tipIndex + 1) % loadingTips.length;
    currentTip.value = loadingTips[tipIndex];
    
    // 更新阶段文字
    if (tipIndex === 1) loadingStage.value = '洗牌中...';
    else if (tipIndex === 2) loadingStage.value = '准备AI玩家...';
    else if (tipIndex === 3) loadingStage.value = '分发手牌...';
    else if (tipIndex === 4) loadingStage.value = '即将完成...';
  }, 1200);
  
  // 加载完成检测 - 优化检测逻辑
  const checkLoading = () => {
    if (!isLoading.value) {
      loadingProgress.value = 100;
      loadingStage.value = '加载完成！';
      clearInterval(progressInterval);
      if (tipInterval) {
        clearInterval(tipInterval);
        tipInterval = null;
      }
    } else {
      setTimeout(checkLoading, 50); // 提高检测频率
    }
  };
  
  setTimeout(checkLoading, 300); // 减少初始延迟
};

// 横屏检测相关方法
const checkIfMobile = () => {
  const userAgent = navigator.userAgent.toLowerCase();
  return /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent) ||
         (window.innerWidth <= 768 && window.innerHeight <= 1024);
};

const checkOrientation = () => {
  const orientation = window.screen?.orientation?.angle ?? 0;
  const isLandscapeByAngle = orientation === 90 || orientation === -90 || orientation === 270;
  const isLandscapeBySize = window.innerWidth > window.innerHeight;
  
  return isLandscapeByAngle || isLandscapeBySize;
};

const updateOrientationState = () => {
  isMobile.value = checkIfMobile();
  isLandscape.value = checkOrientation();
  
  // 只在移动设备且为竖屏时显示提示
  if (isMobile.value && !isLandscape.value && gameStore.gameStatus === 'playing') {
    showOrientationTip.value = true;
  } else {
    showOrientationTip.value = false;
  }
};

const handleOrientationChange = () => {
  // 延迟检测，等待屏幕旋转完成
  setTimeout(updateOrientationState, 300);
};

const dismissOrientationTip = () => {
  showOrientationTip.value = false;
};

let orientationListener = null;

// 监听加载状态变化
watch(() => gameStore.gameStatus, (newStatus) => {
  if (newStatus === 'loading') {
    startLoadingAnimation();
  }
}, { immediate: true });

// 组件挂载时检查状态
onMounted(() => {
  if (gameStore.gameStatus === 'loading') {
    startLoadingAnimation();
  }
  
  if (message.value && message.value.trim()) {
    setTimeout(() => {
      if (gameStore.message === message.value) {
        gameStore.message = '';
      }
    }, 2000);
  }
  
  // 初始化横屏检测
  updateOrientationState();
  
  // 监听屏幕方向变化
  orientationListener = handleOrientationChange;
  window.addEventListener('orientationchange', orientationListener);
  window.addEventListener('resize', orientationListener);
});

// 组件卸载时清理事件监听器
onUnmounted(() => {
  if (orientationListener) {
    window.removeEventListener('orientationchange', orientationListener);
    window.removeEventListener('resize', orientationListener);
  }
});

// 方法
const toggleCard = (card) => {
  if (isMyTurn.value) {
    gameStore.toggleCardSelection(card);
  }
};

const isCardSelected = (card) => {
  return selectedCards.value.some(c => c.id === card.id);
};

// 多人游戏操作方法
const playCardsMultiplayer = async (cards) => {
  try {
    await multiplayerStore.playCards(cards);
    // 状态更新将通过WebSocket事件处理
  } catch (error) {
    gameStore.message = '出牌失败: ' + error.message;
    gameStore.messageType = 'error';
  }
}

const passMultiplayer = async (discardCards) => {
  try {
    await multiplayerStore.passTurn(discardCards);
    // 状态更新将通过WebSocket事件处理
  } catch (error) {
    gameStore.handleError('passMultiplayer', error, `扣牌失败: ${error.message}`);
  }
}

const collectCardsMultiplayer = async () => {
  try {
    await multiplayerStore.collectCards();
    // 状态更新将通过WebSocket事件处理
  } catch (error) {
    gameStore.message = '收牌失败: ' + error.message;
    gameStore.messageType = 'error';
  }
}

const kouLeMultiplayer = async () => {
  try {
    await multiplayerStore.initiateKouLe();
    // 状态更新将通过WebSocket事件处理
  } catch (error) {
    gameStore.message = '发起扣了失败: ' + error.message;
    gameStore.messageType = 'error';
  }
}

const playCards = () => {
  if (gameStore.gameMode === 'multiplayer') {
    playCardsMultiplayer(gameStore.selectedCards);
  } else {
    gameStore.playCards();
  }
};

const pass = () => {
  if (gameStore.gameMode === 'multiplayer') {
    passMultiplayer(gameStore.selectedCards);
  } else {
    gameStore.pass();
  }
};

const collectCards = () => {
  if (gameStore.gameMode === 'multiplayer') {
    collectCardsMultiplayer();
  } else {
    gameStore.collectCards();
  }
};

const kouLe = () => {
  if (gameStore.gameMode === 'multiplayer') {
    kouLeMultiplayer();
  } else {
    gameStore.initiateKouLe();
  }
};

const getPlayerPosition = (player) => {
  const relativeSeat = getRelativeSeatIndex(player);

  if (relativeSeat === 1) {
    return 'right-player';
  }
  if (relativeSeat === 2) {
    return 'left-player';
  }

  // 缺省时按原先顺序回退，保证渲染不会出错
  const index = otherPlayers.value.findIndex(p => p.id === player?.id);
  return index === 0 ? 'right-player' : 'left-player';
};

// 获取Store中的玩家对象，确保名字一致
const getStorePlayer = (enginePlayer) => {
  // 通过ID在store的players中查找对应的玩家对象
  const storePlayer = gameStore.players.find(p => p.id === enginePlayer.id);
  return storePlayer || enginePlayer; // 如果找不到就返回原对象
};

const toggleHistoryDialog = () => {
  showHistoryDialog.value = !showHistoryDialog.value;
};

const closeHistoryDialog = () => {
  showHistoryDialog.value = false;
};

// 获取玩家头像（用于历史记录显示）
const getPlayerAvatar = (playerName) => {
  const player = gameStore.players.find(p => p.name === playerName);
  return player ? player.avatar : '👤';
};

const toggleHistory = () => {
  // 如果面板不可见，先显示面板
  if (!historyVisible.value) {
    historyVisible.value = true;
    // 稍微延迟后展开，以显示动画效果
    setTimeout(() => {
      historyExpanded.value = true;
    }, 50);
  } else if (historyExpanded.value) {
    // 如果已展开，先收起
    historyExpanded.value = false;
    // 收起动画完成后隐藏整个面板
    setTimeout(() => {
      historyVisible.value = false;
    }, 300);
  } else {
    // 如果已收起但可见，再次展开
    historyExpanded.value = true;
  }
};

const confirmEndGame = () => {
  showEndGameDialog.value = true;
};

const cancelEndGame = () => {
  showEndGameDialog.value = false;
};

const endGame = () => {
  // 直接结束游戏并返回菜单
  gameStore.gameStatus = 'menu';
  gameStore.gameEngine = null;
  gameStore.selectedCards = [];
  gameStore.playHistory = [];
  gameStore.currentRoundHistory = [];
  showEndGameDialog.value = false;
  showHistoryDialog.value = false; // 关闭历史记录对话框
  
  // 停止背景音乐
  audioManager.stopBackgroundMusic();
  
  // 重置状态
  historyExpanded.value = false;
  historyVisible.value = false;
};

// 语音控制方法
const toggleSfx = () => {
  audioManager.toggleSfx();
  isSfxEnabled.value = audioManager.isSfxEnabled;
  // 这里不播放音效，因为可能刚关闭了语音
};

// 安全的Card对象访问方法
const safeGetCardColor = (card, fallback = '#666') => {
  try {
    if (card && typeof card.getColor === 'function') {
      return card.getColor();
    }
    return fallback;
  } catch (error) {
    console.warn('获取卡牌颜色失败:', error);
    return fallback;
  }
};

const safeGetCardSymbol = (card, fallback = '?') => {
  try {
    if (card && typeof card.getSymbol === 'function') {
      return card.getSymbol();
    }
    return fallback;
  } catch (error) {
    console.warn('获取卡牌符号失败:', error);
    return fallback;
  }
};

// 音乐控制方法
const toggleMusic = () => {
  audioManager.toggleMusic();
  isMusicEnabled.value = audioManager.isMusicEnabled;
};

// 监听消息变化，自动隐藏
watch(message, (newMessage) => {
  if (newMessage && newMessage.trim()) {
    // 根据消息类型设置不同的显示时间
    const displayTime = gameStore.messageType === 'error' ? 4000 : 2000;
    setTimeout(() => {
      // 只有在消息没有被其他逻辑更新的情况下才清除
      if (gameStore.message === newMessage) {
        gameStore.message = '';
      }
    }, displayTime);
  }
}, { immediate: true });
</script>

<style scoped>
.game-view {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

/* 横屏提示覆盖层 */
.orientation-tip-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(10px);
}

.orientation-tip-content {
  background: linear-gradient(135deg, #2d3436 0%, #636e72 100%);
  border-radius: 20px;
  padding: 40px;
  text-align: center;
  color: white;
  max-width: 320px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.orientation-tip-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%);
  animation: shimmer 3s ease-in-out infinite;
}

.phone-icon {
  font-size: 60px;
  margin-bottom: 20px;
  animation: phoneRotate 2s ease-in-out infinite;
}

.tip-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
  background: linear-gradient(45deg, #ffd700, #ffed4e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tip-text {
  font-size: 16px;
  margin-bottom: 25px;
  opacity: 0.9;
  line-height: 1.5;
}

.rotation-icon {
  font-size: 40px;
  margin-bottom: 25px;
  animation: rotate 2s linear infinite;
}

.dismiss-btn {
  background: linear-gradient(135deg, #00b894 0%, #00cec9 100%);
  border: none;
  border-radius: 25px;
  padding: 12px 30px;
  color: white;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 184, 148, 0.3);
  position: relative;
  z-index: 1;
}

.dismiss-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 184, 148, 0.4);
}

@keyframes phoneRotate {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-90deg);
  }
  75% {
    transform: rotate(-90deg);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.game-content {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  background: 
    radial-gradient(ellipse at center, #1a7f4a 0%, #0f5d2e 50%, #0a4623 100%),
    linear-gradient(45deg, rgba(26, 127, 74, 0.1) 25%, transparent 25%), 
    linear-gradient(-45deg, rgba(26, 127, 74, 0.1) 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, rgba(26, 127, 74, 0.1) 75%), 
    linear-gradient(-45deg, transparent 75%, rgba(26, 127, 74, 0.1) 75%);
  background-size: 100% 100%, 20px 20px, 20px 20px, 20px 20px, 20px 20px;
  background-position: 0 0, 0 0, 0 10px, 10px -10px, -10px 0px;
  border: 8px solid #8B4513;
  border-radius: 20px;
  box-shadow: 
    inset 0 0 50px rgba(0, 0, 0, 0.3),
    inset 0 0 100px rgba(15, 93, 46, 0.2),
    0 0 0 4px #654321,
    0 4px 20px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

/* 添加桌面绒毛纹理效果 */
.game-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 40% 60%, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
  background-size: 30px 30px, 25px 25px, 35px 35px;
  pointer-events: none;
  opacity: 0.7;
}

/* 桌面边缘阴影效果 */
.game-content::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.4);
  border-radius: 12px;
  pointer-events: none;
}

/* 加载状态 */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(-45deg, #1a1a2e, #16213e, #0f3460, #1a237e);
  background-size: 400% 400%;
  animation: gradientShift 8s ease infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  overflow: hidden;
}

.loading-content {
  text-align: center;
  color: white;
  padding: 60px 40px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 30px;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  max-width: 500px;
  width: 90%;
  position: relative;
  overflow: visible;
}

.loading-title {
  font-size: 48px;
  font-weight: bold;
  background: linear-gradient(45deg, #ffd700, #ff6b6b, #4ecdc4, #45b7d1);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: titleGradient 3s ease-in-out infinite;
  margin-bottom: 15px;
  text-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
}

.loading-subtitle {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 40px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  font-weight: 300;
}

/* 卡牌洗牌动画 */
.card-shuffle-animation {
  margin: 30px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120px;
}

.card-stack {
  position: relative;
  width: 100px;
  height: 80px;
}

.animated-card {
  position: absolute;
  width: 60px;
  height: 80px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  animation: cardShuffle 2s ease-in-out infinite;
  animation-delay: var(--delay);
  transform-origin: center;
}

.card-face {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #333;
}

@keyframes cardShuffle {
  0%, 100% {
    transform: translateX(0) rotateZ(0deg);
    opacity: 1;
  }
  25% {
    transform: translateX(-20px) rotateZ(-15deg);
    opacity: 0.8;
  }
  50% {
    transform: translateX(20px) rotateZ(15deg);
    opacity: 0.6;
  }
  75% {
    transform: translateX(-10px) rotateZ(-8deg);
    opacity: 0.8;
  }
}

/* 进度条 */
.progress-container {
  margin: 40px 0 30px;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 15px;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffd700, #ff6b6b, #4ecdc4);
  background-size: 200% 100%;
  animation: progressGlow 2s ease-in-out infinite;
  transition: width 0.5s ease;
  border-radius: 4px;
}

@keyframes progressGlow {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.progress-text {
  font-size: 16px;
  color: #ffd700;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* 动态提示 */
.loading-tips {
  margin: 20px 0;
  min-height: 25px;
}

.tip-text {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  animation: tipFade 1.2s ease-in-out infinite;
  line-height: 1.5;
}

@keyframes tipFade {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
}

/* 飞舞的扑克牌 */
.floating-cards {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.floating-card {
  position: absolute;
  font-size: 30px;
  opacity: 0.3;
  animation: float var(--duration) ease-in-out infinite;
  animation-delay: var(--delay);
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
}

@keyframes float {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.3;
  }
  90% {
    opacity: 0.1;
  }
  100% {
    transform: translateY(-100px) rotate(360deg);
    opacity: 0;
  }
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes titleGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* 历史记录对话框 */
.history-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  backdrop-filter: blur(10px);
  animation: fadeIn 0.3s ease;
}

.history-dialog {
  background: linear-gradient(135deg, 
    rgba(20, 20, 30, 0.95) 0%, 
    rgba(30, 30, 45, 0.95) 50%,
    rgba(15, 15, 25, 0.95) 100%);
  border-radius: 25px;
  max-width: 600px;
  width: 90vw;
  max-height: 80vh;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 1px rgba(255, 215, 0, 0.2);
  border: 2px solid rgba(255, 215, 0, 0.3);
  overflow: hidden;
  animation: slideIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px 15px;
  border-bottom: 2px solid rgba(255, 215, 0, 0.2);
  background: linear-gradient(135deg, 
    rgba(255, 215, 0, 0.1) 0%, 
    rgba(255, 193, 7, 0.05) 100%);
}

.dialog-header h3 {
  color: #FFD700;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.close-btn {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  color: white;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 3px 10px rgba(255, 107, 107, 0.3);
}

.close-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 5px 15px rgba(255, 107, 107, 0.5);
}

.history-content {
  padding: 20px 25px;
  max-height: calc(80vh - 100px);
  overflow-y: auto;
}

/* 空状态 */
.empty-history {
  text-align: center;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.6);
}

.empty-icon {
  font-size: 60px;
  margin-bottom: 15px;
  opacity: 0.7;
}

.empty-text {
  font-size: 18px;
  font-weight: 500;
}

/* 增强的历史记录列表 */
.history-list.enhanced {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.round-history.enhanced {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.08) 0%, 
    rgba(255, 255, 255, 0.05) 100%);
  border-radius: 18px;
  border: 1px solid rgba(255, 215, 0, 0.2);
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.round-history.enhanced:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 215, 0, 0.4);
}

.round-header.enhanced {
  background: linear-gradient(135deg, 
    rgba(255, 215, 0, 0.15) 0%, 
    rgba(255, 193, 7, 0.1) 100%);
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

.round-number {
  color: #FFD700;
  font-weight: bold;
  font-size: 16px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.round-winner {
  color: #43e97b;
  font-weight: bold;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.round-collected {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  background: rgba(0, 0, 0, 0.3);
  padding: 4px 10px;
  border-radius: 12px;
}

.play-item.enhanced {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.2s ease;
}

.play-item.enhanced:hover {
  background: rgba(255, 255, 255, 0.03);
}

.play-item.enhanced:last-child {
  border-bottom: none;
}

.player-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 120px;
}

.player-avatar {
  font-size: 20px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: linear-gradient(135deg, 
    rgba(255, 215, 0, 0.2) 0%, 
    rgba(255, 193, 7, 0.1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.player-name {
  color: white;
  font-weight: bold;
  font-size: 14px;
}

.play-cards {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.passed-indicator {
  color: #ff6b6b;
  font-style: italic;
  font-weight: 500;
  background: rgba(255, 107, 107, 0.1);
  padding: 6px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 107, 107, 0.3);
}

.cards-grid {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.card-chip {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95) 0%, 
    rgba(248, 249, 250, 0.95) 100%);
  padding: 4px 8px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.1);
  min-width: 35px;
  justify-content: center;
}

.card-chip .card-symbol {
  font-weight: bold;
  font-size: 14px;
}

.card-chip .card-value {
  font-weight: bold;
  font-size: 11px;
  color: #333;
}

/* 动画 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 滚动条样式 */
.history-content::-webkit-scrollbar {
  width: 8px;
}

.history-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.history-content::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  border-radius: 4px;
}

.history-content::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #FFA500 0%, #FF8C00 100%);
}

/* 历史记录面板（桌面端） - 缩小宽度 */
.history-panel {
  width: 180px;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  padding: 15px 10px;
  overflow-y: auto;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.history-panel.desktop-only {
  display: none; /* 隐藏桌面端历史记录面板 */
}

.history-panel h3 {
  color: white;
  font-size: 18px;
  margin-bottom: 15px;
  text-align: center;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.round-history {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 12px;
}

.round-header {
  color: #ffd700;
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.round-plays {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.play-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.player-name {
  color: white;
  font-weight: bold;
  min-width: 80px;
}

.passed {
  color: #999;
  font-style: italic;
}

.cards {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.card-display {
  background: rgba(255, 255, 255, 0.9);
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.card-display .card-symbol {
  font-weight: bold;
  font-size: 14px;
}

.card-display .card-rank {
  font-weight: bold;
  font-size: 12px;
  color: #333;
}


/* 游戏主区域 */
.game-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 0; /* 防止flex子项过度伸展 */
}

/* 游戏主区域全宽度 */
.game-main.full-width {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 0;
}

/* 顶部信息栏 - 进一步减小高度 */
.game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  background: linear-gradient(135deg, #8B4513 0%, #A0522D 50%, #654321 100%);
  border: 2px solid #D2691E;
  border-radius: 10px;
  margin: 6px;
  box-shadow: 
    0 4px 15px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 215, 0, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 10;
  height: 40px;
}

/* 调整顶部栏中的元素间距 */
.game-header > div:not(:first-child):not(:last-child) {
  margin: 0 5px;
}

/* 添加木质纹理效果 */
.game-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(90deg, transparent 0%, rgba(210, 105, 30, 0.1) 50%, transparent 100%),
    repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(0, 0, 0, 0.05) 3px, rgba(0, 0, 0, 0.05) 6px);
  border-radius: 13px;
  pointer-events: none;
}

.round-info {
  font-size: 14px; /* 进一步减小字体 */
  font-weight: bold;
  color: #FFD700;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

/* 首发玩家提示 - 调整颜色适配新背景 */
.first-player-info {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #00b894 0%, #00cec9 100%);
  padding: 8px 12px;
  border-radius: 12px;
  color: white;
  font-size: 14px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 0 2px 8px rgba(0, 184, 148, 0.4);
  animation: firstPlayerGlow 2s ease-in-out infinite alternate;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.dice-icon {
  font-size: 16px;
  animation: diceRoll 1s ease-in-out infinite;
}

.first-text {
  font-size: 13px;
  letter-spacing: 0.5px;
}

@keyframes firstPlayerGlow {
  0% {
    box-shadow: 0 2px 8px rgba(67, 233, 123, 0.3);
  }
  100% {
    box-shadow: 0 2px 12px rgba(67, 233, 123, 0.5);
  }
}

@keyframes diceRoll {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
}

.star-coins.enhanced-coins {
  display: flex;
  align-items: center;
  gap: 4px; /* 减小间距 */
  background: linear-gradient(135deg, 
    rgba(255, 215, 0, 0.9) 0%, 
    rgba(255, 193, 7, 0.8) 50%, 
    rgba(255, 152, 0, 0.9) 100%);
  color: #1a1a1a;
  font-size: 12px; /* 减小字体大小 */
  font-weight: 700; /* 减小字体重量 */
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
  padding: 6px 12px; /* 减小内边距 */
  border-radius: 16px; /* 减小圆角 */
  border: 1px solid rgba(255, 215, 0, 0.6); /* 减小边框 */
  box-shadow: 
    0 2px 8px rgba(255, 215, 0, 0.3), /* 减小阴影 */
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  max-width: 80px; /* 限制最大宽度 */
}

/* 顶部玩家收牌信息 */
.player-collected-info-top {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 50%, #2dd4bf 100%);
  color: white;
  font-size: 12px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 16px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0 15px rgba(67, 233, 123, 0.3);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
  animation: collectInfoGlow 3s ease-in-out infinite;
  white-space: nowrap;
}

.coin-icon {
  font-size: 14px; /* 减小图标大小 */
  filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.6));
  animation: coinFloat 2s ease-in-out infinite;
}

.coin-amount {
  font-weight: 800; /* 减小字体重量 */
  font-size: 13px; /* 减小字体大小 */
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4);
  white-space: nowrap; /* 防止换行 */
}

.coin-glow {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.3), 
    transparent);
  animation: coinGlow 3s ease-in-out infinite;
}

@keyframes coinFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-1px) rotate(180deg); /* 减小浮动距离 */
  }
}

@keyframes coinGlow {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.header-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
}

.rules-icon,
.history-icon,
.end-game-icon,
.audio-icon,
.music-icon {
  background: linear-gradient(135deg, rgba(139, 69, 19, 0.8) 0%, rgba(160, 82, 45, 0.8) 100%);
  border: 2px solid rgba(255, 215, 0, 0.4);
  border-radius: 50%;
  width: 30px; /* 从35px减小到30px */
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.rules-icon:hover,
.history-icon:hover,
.end-game-icon:hover,
.audio-icon:hover,
.music-icon:hover {
  background: linear-gradient(135deg, rgba(160, 82, 45, 0.9) 0%, rgba(210, 105, 30, 0.9) 100%);
  border-color: rgba(255, 215, 0, 0.6);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.rules-icon span,
.history-icon span,
.end-game-icon span,
.audio-icon span,
.music-icon span {
  font-size: 16px; /* 从18px减小到16px */
}

.end-game-icon {
  background: rgba(255, 100, 100, 0.2);
}

.end-game-icon:hover {
  background: rgba(255, 100, 100, 0.3);
}

.history-icon {
  background: linear-gradient(135deg, rgba(139, 69, 19, 0.8) 0%, rgba(160, 82, 45, 0.8) 100%);
  border: 2px solid rgba(255, 215, 0, 0.4);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.history-icon:hover {
  background: linear-gradient(135deg, rgba(160, 82, 45, 0.9) 0%, rgba(210, 105, 30, 0.9) 100%);
  border-color: rgba(255, 215, 0, 0.6);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.history-icon.active {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.4) 0%, rgba(255, 193, 7, 0.4) 100%);
  border: 2px solid rgba(255, 215, 0, 0.7);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.history-icon .badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #ff4444;
  color: white;
  border-radius: 50%;
  min-width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  padding: 0 4px;
}

/* 对话框样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.dialog-content {
  background: rgba(20, 20, 20, 0.95);
  border-radius: 20px;
  padding: 30px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dialog-content h3 {
  color: white;
  font-size: 24px;
  margin-bottom: 15px;
}

.dialog-content p {
  color: #ccc;
  font-size: 16px;
  margin-bottom: 25px;
  line-height: 1.5;
}

.dialog-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
}

/* AI玩家信息 - 进一步减小空间占用 */
.ai-players-compact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 18px; /* 进一步减小内边距 */
  gap: 12px; /* 进一步减小间距 */
  /* 移除所有背景样式 */
}

/* AI玩家信息增强显示 */
.ai-player-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  background: linear-gradient(135deg, 
    rgba(139, 69, 19, 0.85) 0%, 
    rgba(160, 82, 45, 0.75) 50%,
    rgba(101, 67, 33, 0.85) 100%);
  padding: 8px 12px;
  border-radius: 15px;
  border: 1px solid rgba(255, 215, 0, 0.4);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 215, 0, 0.2);
  backdrop-filter: blur(5px);
}

.ai-avatar-wrapper {
  position: relative;
  flex-shrink: 0;
}

.ai-avatar {
  font-size: 24px; /* 增加头像尺寸 */
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, 
    rgba(255, 215, 0, 0.9) 0%, 
    rgba(255, 193, 7, 0.8) 50%, 
    rgba(255, 152, 0, 0.9) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 215, 0, 0.6);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
}

/* 收牌数量徽章增强 */
.ai-collected-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 50%, #2dd4bf 100%);
  color: white;
  font-size: 11px;
  font-weight: 900;
  padding: 3px 7px;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
  min-width: 20px;
  text-align: center;
  line-height: 1;
  animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 
      0 2px 8px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 
      0 4px 12px rgba(67, 233, 123, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }
}

.ai-info-mini {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: auto;
  flex: 1;
}

.ai-name {
  color: #FFD700;
  font-size: 12px; /* 增加字体大小 */
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  line-height: 1.2;
}

.ai-cards-count {
  color: rgba(255, 255, 255, 0.9);
  font-size: 10px; /* 稍微增加字体 */
  line-height: 1.2;
  font-weight: 500;
}

.avatar {
  font-size: 30px; /* 减小从 32px */
  width: 42px; /* 减小从 45px */
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(139, 69, 19, 0.8) 0%, rgba(160, 82, 45, 0.6) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 215, 0, 0.5);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* 保留原有的.avatar样式供其他地方使用 */

.name {
  font-weight: bold;
  font-size: 13px;
}

.cards-count {
  font-size: 11px;
  opacity: 0.8;
}

.player-info .star-coins {
  font-size: 11px;
  color: #ffd700;
  font-weight: bold;
}

/* 移除不再需要的.collected样式 */

/* 出牌区域 - 增加空间给桌面更多展示区域 */
.play-area {
  flex: 1.2; /* 增加出牌区域的权重 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px;
  position: relative;
  min-height: 120px; /* 增加最小高度，给出牌更宽敞的展示空间 */
}

.other-plays {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.player-play {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.player-play.left-player {
  left: 15%; /* 稍微内缩，给出牌更多空间 */
  top: 25%; /* 调整为同一水平线 */
}

.player-play.right-player {
  right: 15%; /* 稍微内缩，与左侧对称 */
  top: 25%; /* 与左侧保持同一水平线 */
}

.my-play {
  position: absolute;
  bottom: 8%; /* 进一步靠下，增加层次感 */
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.played-cards {
  display: flex;
  gap: 30px;
  margin-bottom: 20px;
}

.played-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.player-label {
  font-size: 14px;
  color: white;
  font-weight: bold;
}

.cards-group {
  display: flex;
  gap: 5px;
}

.card.small {
  width: 40px; /* 从45px减小到40px */
  height: 60px; /* 从65px减小到60px */
  font-size: 11px; /* 进一步减小字体 */
}

.card.small .card-rank {
  font-size: 11px; /* 进一步减小字体 */
}

.card.small .card-symbol {
  font-size: 16px; /* 进一步减小图标 */
}

.card.small .card-name {
  font-size: 9px; /* 进一步减小字体 */
}

.pass-indicator {
  background: rgba(255, 255, 255, 0.2);
  padding: 10px 20px;
  border-radius: 10px;
  color: white;
  font-size: 14px;
}

.turn-indicator {
  position: fixed;
  top: 55px; /* 向下移动，避免与顶部头部栏重叠 */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 215, 0, 0.15); /* 使用金色半透明背景，与游戏主题一致 */
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 215, 0, 0.4); /* 金色边框 */
  padding: 8px 16px; /* 稍微增加内边距 */
  border-radius: 18px; /* 更圆润的边框 */
  color: #FFD700; /* 金色文字 */
  font-size: 13px; /* 稍微增大字体 */
  font-weight: 600;
  animation: pulse 1.5s ease-in-out infinite;
  box-shadow: 0 3px 12px rgba(255, 215, 0, 0.3); /* 金色阴影 */
  z-index: 1500; /* 确保在顶部显示 */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* 增加文字阴影提高可读性 */
}

/* 通用消息提示 */
.general-message-indicator {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 6px 12px;
  border-radius: 12px;
  text-align: center;
  z-index: 2000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  animation: messageSlideDown 0.3s ease-out;
  max-width: 80vw;
  min-width: 150px;
}

.general-message-indicator.message-error {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.9) 0%, rgba(255, 152, 0, 0.9) 100%);
  border-color: rgba(255, 193, 7, 0.6);
  color: #1a1a1a;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
}

.general-message-indicator.message-success {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.9) 0%, rgba(56, 142, 60, 0.9) 100%);
  border-color: rgba(76, 175, 80, 0.6);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.general-message-indicator.message-info {
  background: linear-gradient(135deg, rgba(96, 125, 139, 0.9) 0%, rgba(69, 90, 100, 0.9) 100%);
  border-color: rgba(96, 125, 139, 0.6);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.message-content {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

.message-icon {
  font-size: 14px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.message-text {
  font-size: 12px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  line-height: 1.2;
}

@keyframes messageSlideDown {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* 轮次结果显示提示 */
.round-result-indicator {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 10px 20px;
  border-radius: 20px;
  text-align: center;
  z-index: 500;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  animation: slideInDown 0.5s ease-out;
}

.result-message {
  color: white;
  font-size: 16px;
  font-weight: 600;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* 收牌Toast提示 */
.collect-toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: linear-gradient(135deg, rgba(139, 69, 19, 0.95) 0%, rgba(160, 82, 45, 0.95) 100%);
  border: 2px solid #FFD700;
  border-radius: 20px;
  padding: 15px 20px;
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 215, 0, 0.3);
  backdrop-filter: blur(10px);
  animation: toastSlideIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  max-width: 90vw;
}

.toast-content {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.winner-badge {
  font-size: 24px;
  filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.6));
}

.toast-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #FFD700;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.winner-name {
  font-size: 16px;
  font-weight: bold;
}

.collect-count {
  font-size: 13px;
  opacity: 0.9;
}

.countdown-circle {
  width: 35px;
  height: 35px;
  border: 3px solid #FFD700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 215, 0, 0.1);
  position: relative;
  animation: countdownPulse 1s ease-in-out infinite;
}

.countdown-number {
  font-size: 16px;
  font-weight: bold;
  color: #FFD700;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.toast-collect-btn {
  width: 100%;
  background: linear-gradient(135deg, #00b894 0%, #00cec9 100%);
  border: none;
  border-radius: 15px;
  padding: 8px 16px;
  color: white;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 3px 10px rgba(0, 184, 148, 0.3);
}

.toast-collect-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 15px rgba(0, 184, 148, 0.4);
}

@keyframes toastSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes countdownPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.1);
  }
}

/* 操作按钮 - 斗地主风格的布局 */
.action-buttons {
  display: flex;
  justify-content: center;
  gap: 15px; /* 减小间距，让按钮更紧凑 */
  padding: 12px; /* 减小内边距，减少占用空间 */
  background: none; /* 移除背景渐变 */
  border-radius: 0;
  position: relative;
  z-index: 30; /* 设置较低的z-index，确保不会遮挡选中的牌 */
}

.action-buttons.invisible {
  visibility: hidden;
}

/* 扑克牌样式 - 严格按照斗地主设计 */
.card {
  width: 62px; /* 增加卡片宽度，参考斗地主 */
  height: 90px; /* 增加卡片高度，参考斗地主 */
  background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 6px; /* 斗地主风格的圆角 */
  border: 1px solid #ddd; /* 更细的边框 */
  box-shadow: 
    0 2px 6px rgba(0, 0, 0, 0.15),
    0 1px 3px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 4px 3px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  transform: translateY(0); /* 明确设置未选中状态的位置 */
  transform-style: preserve-3d;
  user-select: none;
  z-index: 10; /* 基础层级 */
}

/* 移除悬浮效果 - 手机端不需要悬浮 */

/* 选中状态的扑克牌 - 轻微上移和金色高亮效果 */
.card.selected,
.card.red-card.selected,
.card.black-card.selected {
  transform: translateY(-8px) !important; /* 轻微上移8px，既明显又不会被遮挡 */
  box-shadow: 
    0 6px 16px rgba(255, 215, 0, 0.4),
    0 3px 8px rgba(255, 193, 7, 0.3),
    inset 0 0 0 2px #FFD700, /* 金色边框高亮 */
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 12px rgba(255, 215, 0, 0.6); /* 金色发光效果 */
  border-color: #FFD700 !important;
  z-index: 100 !important; /* 适中的z-index，确保在手牌容器内显示正常 */
  position: relative; /* 确保z-index生效 */
}

/* 确保未选中状态完全复原 */
.card:not(.selected) {
  transform: translateY(0) !important; /* 强制未选中状态回到原位 */
}

/* 扑克牌内容 */
.card-rank {
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.card-symbol {
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.1));
}

.card-name {
  font-size: 9px;
  font-weight: 600;
  text-align: center;
  line-height: 1.1;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* 扑克牌按压效果 */
.card:active {
  transform: translateY(-4px) scale(0.98);
  transition: all 0.1s ease;
}

/* 游戏按钮基础样式 - 更紧凑的设计 */
.btn {
  padding: 8px 20px; /* 减小内边距，让按钮更紧凑 */
  border: none;
  border-radius: 20px; /* 稍微减小圆角 */
  font-size: 14px; /* 减小字体大小 */
  font-weight: 600; /* 适度减小字体重量 */
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease; /* 简化过渡效果 */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); /* 减少阴影，更简洁 */
  user-select: none;
  min-width: 80px; /* 减小按钮宽度 */
  letter-spacing: 0.5px;
  transform: translateZ(0);
}

/* 按钮悬浮效果 - 斗地主风格 */
.btn:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.02); /* 更明显的悬浮效果 */
  box-shadow: 
    0 8px 20px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* 按钮按压效果 - 斗地主风格 */
.btn:active:not(:disabled) {
  transform: translateY(0); /* 按下时回到原位 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* 主要按钮（出牌）- 简化的橙色按钮 */
.btn-primary {
  background: linear-gradient(135deg, #ff8c42 0%, #ff6b35 50%, #ff5722 100%);
  color: white;
  border: 1px solid rgba(255, 107, 53, 0.3); /* 减小边框 */
  box-shadow: 0 2px 6px rgba(255, 107, 53, 0.2); /* 简化阴影 */
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #ff7a28 0%, #ff5722 50%, #e64a19 100%);
  transform: translateY(-1px); /* 减小悬浮效果 */
  box-shadow: 0 4px 10px rgba(255, 107, 53, 0.3); /* 简化悬浮阴影 */
}

/* 次要按钮（扣牌）- 简化的蓝色按钮 */
.btn-secondary {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 50%, #00d4ff 100%);
  color: white;
  border: 1px solid rgba(79, 172, 254, 0.3); /* 减小边框 */
  box-shadow: 0 2px 6px rgba(79, 172, 254, 0.2); /* 简化阴影 */
}

.btn-secondary:hover:not(:disabled) {
  background: linear-gradient(135deg, #3b9cfd 0%, #00e0fd 50%, #00c3ff 100%);
  transform: translateY(-1px); /* 减小悬浮效果 */
  box-shadow: 0 4px 10px rgba(79, 172, 254, 0.3); /* 简化悬浮阴影 */
}

/* 警告按钮（扣了）- 红色警告按钮，更有警示性 */
.btn-warning {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 50%, #a93226 100%);
  color: white;
  border: 1px solid rgba(231, 76, 60, 0.4);
  box-shadow: 0 2px 6px rgba(231, 76, 60, 0.3);
  position: relative;
  overflow: hidden;
}

.btn-warning:hover:not(:disabled) {
  background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 50%, #8b0000 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(231, 76, 60, 0.4);
}

.btn-warning::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #e74c3c, #ff6b6b, #e74c3c);
  border-radius: inherit;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s;
}

.btn-warning:hover:not(:disabled)::before {
  opacity: 0.5;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.05); opacity: 0.3; }
}

/* 成功按钮 */
.btn-success {
  background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
  color: white;
  border: 2px solid rgba(108, 92, 231, 0.3);
}

.btn-success:hover:not(:disabled) {
  background: linear-gradient(135deg, #5f3dc4 0%, #9775fa 100%);
  border-color: rgba(108, 92, 231, 0.5);
}

/* 危险按钮 */
.btn-danger {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff4444 100%);
  color: white;
  border: 2px solid rgba(255, 107, 107, 0.3);
}

.btn-danger:hover:not(:disabled) {
  background: linear-gradient(135deg, #ff5252 0%, #ff3333 100%);
  border-color: rgba(255, 107, 107, 0.5);
}

/* 禁用状态 - 斗地主风格 */
.btn:disabled {
  opacity: 0.6; /* 更明显的禁用效果 */
  cursor: not-allowed;
  transform: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  filter: grayscale(0.3); /* 灰度效果 */
}

/* 按钮发光效果 - 增强版 */
.btn:not(:disabled)::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg, 
    transparent, 
    rgba(255, 255, 255, 0.4), 
    transparent
  );
  transition: left 0.6s ease;
  border-radius: inherit;
}

.btn:hover:not(:disabled)::before {
  left: 100%;
}

/* 增加按钮的脉冲动画 */
.btn:not(:disabled)::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease;
}

.btn:active:not(:disabled)::after {
  width: 300px;
  height: 300px;
}

/* 玩家手牌 - 优化高度平衡 */
.player-hand {
  padding: 12px 18px 20px; /* 减小内边距 */
  border-radius: 20px 20px 0 0;
  min-height: 160px; /* 减小最小高度，给桌面更多空间 */
  position: relative;
  flex: 1.8; /* 减小权重，给出牌区域更多空间 */
  display: flex;
  flex-direction: column;
  z-index: 50; /* 确保手牌区域有合适的层级 */
  overflow: visible; /* 确保不会裁剪选中的牌 */
}

/* 移除手牌信息区域 */
.hand-info {
  display: none; /* 隐藏原有的手牌信息 */
}

.cards-container {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible; /* 确保垂直方向不会裁剪选中的牌 */
  padding: 25px 0 8px; /* 增加顶部内边距，为选中牌留出空间 */
  min-height: 100px; /* 减小最小高度 */
  flex: 1;
  align-items: flex-end;
  position: relative; /* 为子元素的z-index创建层叠上下文 */
  z-index: 60; /* 比player-hand稍高，确保牌能正确显示 */
}

/* 玩家收牌信息增强显示 */ 
.player-collected-info {
  position: absolute;
  top: 10px;
  right: 18px;
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 50%, #2dd4bf 100%);
  color: white;
  font-size: 13px;
  font-weight: 900;
  padding: 6px 14px;
  border-radius: 18px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 
    0 3px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0 20px rgba(67, 233, 123, 0.3);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
  z-index: 10;
  animation: collectInfoGlow 3s ease-in-out infinite;
}

@keyframes collectInfoGlow {
  0%, 100% {
    box-shadow: 
      0 3px 12px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      0 0 20px rgba(67, 233, 123, 0.3);
  }
  50% {
    box-shadow: 
      0 4px 16px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.4),
      0 0 30px rgba(67, 233, 123, 0.5);
  }
}

/* 红色花色卡片 */
.card.red-card {
  color: #ff4444;
}

.card.red-card .card-rank,
.card.red-card .card-name {
  color: #ff4444;
}

/* 黑色花色卡片 */
.card.black-card {
  color: #333;
}

.card.black-card .card-rank,
.card.black-card .card-name {
  color: #333;
}

/* 王牌特殊处理 */
.card:not(.red-card):not(.black-card) {
  color: #666;
}

.cards-container::-webkit-scrollbar {
  height: 5px;
}

.cards-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
}

.cards-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 5px;
}

/* 移动端历史记录面板 */
.mobile-history-panel {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.95);
  border-radius: 20px 20px 0 0;
  transition: transform 0.3s ease;
  transform: translateY(calc(100% - 50px));
  z-index: 1000;
  max-height: 70vh;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}

.mobile-history-panel.expanded {
  transform: translateY(0);
}

.history-handle {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  font-weight: bold;
  background: rgba(255, 255, 255, 0.05);
  transition: background 0.2s ease;
}

.history-handle:hover {
  background: rgba(255, 255, 255, 0.1);
}

.handle-icon {
  width: 40px;
  height: 4px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 2px;
}

.mobile-history-content {
  padding: 20px;
  max-height: calc(70vh - 50px);
  overflow-y: auto;
}


/* 响应式 */
@media (max-width: 768px) {
  .loading-content {
    padding: 40px 20px;
    max-width: 95%;
  }
  
  /* 移动端星光币显示优化 */
  .star-coins.enhanced-coins {
    font-size: 11px; /* 移动端进一步减小 */
    padding: 5px 10px; /* 移动端更紧凑 */
    border-radius: 14px;
    gap: 3px;
    max-width: 70px; /* 移动端限制更小 */
  }
  
  .coin-icon {
    font-size: 12px; /* 移动端减小图标 */
  }
  
  .coin-amount {
    font-size: 11px; /* 移动端减小字体 */
  }
  
  .loading-title {
    font-size: 36px;
  }
  
  .loading-subtitle {
    font-size: 16px;
    margin-bottom: 30px;
  }
  
  .card-shuffle-animation {
    height: 100px;
    margin: 20px 0;
  }
  
  .animated-card {
    width: 50px;
    height: 70px;
  }
  
  .card-face {
    font-size: 20px;
  }
  
  .progress-container {
    margin: 30px 0 20px;
  }
  
  .progress-text {
    font-size: 14px;
  }
  
  .tip-text {
    font-size: 14px;
  }
  
  .floating-card {
    font-size: 24px;
  }

  .history-panel.desktop-only {
    display: none; /* 桌面端也隐藏 */
  }
  
  .mobile-history-panel {
    display: none; /* 隐藏移动端历史记录面板 */
  }
  
  .history-icon {
    display: flex; /* 显示历史记录按钮 */
  }
  
  /* 移动端历史记录对话框适配 */
  .history-dialog {
    max-width: 95vw;
    max-height: 85vh;
    border-radius: 20px;
  }
  
  .dialog-header {
    padding: 15px 20px 12px;
  }
  
  .dialog-header h3 {
    font-size: 20px;
  }
  
  .close-btn {
    width: 35px;
    height: 35px;
    font-size: 16px;
  }
  
  .history-content {
    padding: 15px 20px;
    max-height: calc(85vh - 90px);
  }
  
  .empty-icon {
    font-size: 50px;
  }
  
  .empty-text {
    font-size: 16px;
  }
  
  .round-header.enhanced {
    padding: 12px 15px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .play-item.enhanced {
    padding: 10px 15px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .player-info {
    min-width: auto;
  }
  
  .play-cards {
    width: 100%;
    justify-content: flex-start;
  }
  
  /* 移动端首发玩家提示调整 */
  .first-player-info {
    padding: 6px 10px;
    font-size: 12px;
    gap: 4px;
  }
  
  .dice-icon {
    font-size: 14px;
  }
  
  .first-text {
    font-size: 11px;
  }
  
  /* 移动端AI玩家信息纯净设计 */
  .ai-players-compact {
    padding: 6px 15px;
    gap: 12px;
    /* 移除所有背景和边距 */
  }
  
  .ai-player-mini {
    gap: 6px;
  }
  
  .ai-avatar {
    font-size: 20px;
    width: 28px;
    height: 28px;
  }
  
  .ai-collected-badge {
    font-size: 9px;
    padding: 1px 4px;
    top: -3px;
    right: -3px;
    min-width: 14px;
  }
  
  .ai-name {
    font-size: 10px;
  }
  
  .ai-cards-count {
    font-size: 8px;
  }
  
  .other-players {
    padding: 10px;
    gap: 10px;
  }
  
  .other-player {
    min-width: 70px;
    gap: 6px;
  }
  
  /* 移动端保留原有avatar样式供其他组件使用 */
  .avatar {
    font-size: 28px;
    width: 38px;
    height: 38px;
  }
  
  .name {
    font-size: 11px;
  }
  
  .cards-count {
    font-size: 10px;
  }
  
  .player-info .star-coins {
    font-size: 10px;
  }
  
  /* 移除不再需要的.collected移动端样式 */
  
  .played-cards {
    gap: 15px;
  }
  
  /* 移动端手牌区域优化 */
  .cards-container {
    gap: 8px;
    padding: 16px 0 8px; /* 减小上边距，但保证选中牌显示 */
    min-height: 100px; /* 减小最小高度 */
  }
  
  .player-hand {
    padding: 10px 15px 16px; /* 减小手牌区域内边距 */
    min-height: 130px; /* 减小最小高度，给桌面更多空间 */
  }
  
  /* 移动端卡片尺寸保持清晰 */
  .card {
    width: 60px; /* 保持合适的卡片宽度 */
    height: 88px; /* 保持合适的卡片高度 */
  }
  
  .action-buttons {
    gap: 12px; /* 减小按钮间距 */
    padding: 10px; /* 减小容器内边距 */
  }
  
  /* 移动端按钮优化 */
  .btn {
    font-size: 13px; /* 移动端按钮字体 */
    padding: 8px 18px; /* 移动端按钮内边距 */
    min-width: 75px; /* 减小最小宽度 */
  }
  
  .action-buttons {
    gap: 12px; /* 减小按钮间距 */
    padding: 10px; /* 减小容器内边距 */
  }
  
  /* 移动端收牌Toast调整 */
  .collect-toast {
    top: 60px;
    padding: 12px 16px;
    max-width: 95vw;
  }
  
  .toast-content {
    gap: 8px;
    margin-bottom: 8px;
  }
  
  .winner-badge {
    font-size: 20px;
  }
  
  .winner-name {
    font-size: 14px;
  }
  
  .collect-count {
    font-size: 12px;
  }
  
  .countdown-circle {
    width: 30px;
    height: 30px;
    border-width: 2px;
  }
  
  .countdown-number {
    font-size: 14px;
  }
  
  .toast-collect-btn {
    padding: 6px 12px;
    font-size: 13px;
  }
  
  /* 移动端轮次结果提示 */
  .round-result-indicator {
    top: 10px;
    padding: 8px 16px;
    max-width: 90vw;
  }
  
  .result-message {
    font-size: 14px;
  }
  
  /* 移动端通用消息提示 */
  .general-message-indicator {
    top: 5px;
    padding: 4px 8px;
    max-width: 85vw;
    min-width: 120px;
  }
  
  .message-icon {
    font-size: 12px;
  }
  
  .message-text {
    font-size: 11px;
  }
}

/* 移动端横屏专用布局 */
@media screen and (max-height: 600px) and (orientation: landscape) {
  .game-content {
    border: 4px solid #8B4513;
    border-radius: 15px;
    margin: 5px;
  }
  
  .game-header {
    padding: 8px 15px;
    margin: 5px;
    border-radius: 10px;
  }
  
  .round-info {
    font-size: 16px;
  }
  
  .star-coins {
    font-size: 14px;
    padding: 4px 8px;
  }
  
  /* 横屏星光币显示优化 */
  .star-coins.enhanced-coins {
    font-size: 10px; /* 横屏进一步缩小 */
    padding: 4px 8px;
    border-radius: 12px;
    gap: 2px;
    max-width: 60px; /* 横屏更紧凑 */
  }
  
  .coin-icon {
    font-size: 10px;
  }
  
  .coin-amount {
    font-size: 10px;
  }
  
  .first-player-info {
    padding: 4px 8px;
    font-size: 12px;
  }
  
  /* 横屏时AI玩家信息纯净设计 */
  .ai-players-compact {
    position: absolute;
    top: 45px;
    left: 0;
    right: 0;
    padding: 4px 15px;
    gap: 10px;
    /* 移除背景和z-index */
  }
  
  .ai-player-mini {
    gap: 5px;
  }
  
  .ai-avatar {
    font-size: 18px;
    width: 24px;
    height: 24px;
  }
  
  .ai-collected-badge {
    font-size: 8px;
    padding: 1px 3px;
    top: -2px;
    right: -2px;
    min-width: 12px;
  }
  
  .ai-name {
    font-size: 9px;
  }
  
  .ai-cards-count {
    font-size: 7px;
  }
  
  /* 横屏时重新布局玩家区域 - 参考腾讯游戏界面 */
  .other-players {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    height: auto;
    pointer-events: none;
    z-index: 20;
  }
  
  .other-player {
    min-width: 80px;
    max-width: 100px;
    padding: 8px 10px;
    pointer-events: auto;
    background: linear-gradient(135deg, rgba(139, 69, 19, 0.9) 0%, rgba(160, 82, 45, 0.8) 100%);
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
  }
  
  .other-player:first-child {
    transform: none;
  }
  
  .other-player:last-child {
    transform: none;
  }
  
  /* AI玩家信息紧凑显示 */
  .other-player .player-info {
    gap: 2px;
  }
  
  .other-player .avatar {
    font-size: 24px;
  }
  
  .other-player .name {
    font-size: 11px;
    font-weight: bold;
  }
  
  .other-player .cards-count {
    font-size: 10px;
    opacity: 0.9;
  }
  
  .other-player .star-coins {
    font-size: 10px;
    color: #FFD700;
    font-weight: bold;
  }
  
  .other-player .collected {
    font-size: 10px;
    color: #FFD700;
  }
  
  /* 出牌区域居中 */
  .play-area {
    padding: 8px;
    flex: 1;
    height: auto;
    min-height: 80px;
    max-height: 120px;
    overflow: visible;
  }
  
  /* 横屏出牌位置优化 */
  .player-play.left-player {
    left: 18%;
    top: 20%; /* 横屏时左右玩家更靠上 */
  }
  
  .player-play.right-player {
    right: 18%;
    top: 20%; /* 与左侧保持同一水平 */
  }
  
  .my-play {
    bottom: 15%; /* 横屏时自己的出牌位置调整 */
  }
  
  /* 游戏主区域调整 */
  .game-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* 防止flex子项过度伸展 */
    overflow: hidden;
  }
  
  /* 玩家手牌区域优化 */
  .player-hand {
    padding: 10px 15px;
    border-radius: 15px 15px 0 0;
  }
  
  .cards-container {
    gap: 6px;
    justify-content: center;
    max-width: 100%;
    overflow-x: auto;
    padding: 12px 0 5px; /* 横屏时也减小上边距，给桌面更多空间 */
  }
  
  /* 操作按钮横向布局 */
  .action-buttons {
    padding: 10px 15px;
    gap: 15px;
  }
  
  .btn {
    padding: 6px 12px;
    font-size: 12px;
    min-width: 70px;
  }
  
  
  /* 收牌弹框适配横屏 */
  .collect-toast {
    top: 50px;
    padding: 10px 15px;
    max-width: 80vw;
  }
  
  .toast-content {
    gap: 8px;
    margin-bottom: 6px;
  }
  
  .winner-badge {
    font-size: 18px;
  }
  
  .winner-name {
    font-size: 13px;
  }
  
  .collect-count {
    font-size: 11px;
  }
  
  .countdown-circle {
    width: 28px;
    height: 28px;
  }
  
  .countdown-number {
    font-size: 12px;
  }
  
  .toast-collect-btn {
    padding: 5px 10px;
    font-size: 12px;
  }
  
  /* 头部按钮尺寸调整 */
  .rules-icon,
  .history-icon,
  .end-game-icon,
  .audio-icon,
  .music-icon {
    width: 35px;
    height: 35px;
  }
  
  .rules-icon span,
  .history-icon span,
  .end-game-icon span,
  .audio-icon span,
  .music-icon span {
    font-size: 16px;
  }
}

/* 加载动画横屏适配 */
@media (orientation: landscape) and (max-height: 600px) {
  .loading-content {
    padding: 25px 30px;
    max-width: 85vw;
    max-height: 85vh;
    overflow-y: hidden;
  }
  
  .loading-title {
    font-size: 32px;
    margin-bottom: 10px;
  }
  
  .loading-subtitle {
    font-size: 16px;
    margin-bottom: 25px;
  }
  
  .card-shuffle-animation {
    height: 80px;
    margin: 15px 0;
  }
  
  .card-stack {
    width: 80px;
    height: 60px;
  }
  
  .animated-card {
    width: 50px;
    height: 65px;
  }
  
  .card-face {
    font-size: 20px;
  }
  
  .progress-container {
    margin: 20px 0 15px;
  }
  
  .progress-bar {
    height: 6px;
    margin-bottom: 10px;
  }
  
  .progress-text {
    font-size: 14px;
  }
  
  .loading-tips {
    margin: 15px 0;
    min-height: 20px;
  }
  
  .tip-text {
    font-size: 14px;
  }
  
  .floating-card {
    font-size: 24px;
  }
}

/* 小屏幕横屏专门优化 - 针对小米15等6.36英寸设备 */
@media screen and (max-height: 500px) and (orientation: landscape) {
  .game-content {
    border: 3px solid #8B4513;
    border-radius: 12px;
    margin: 3px;
  }
  
  .game-header {
    padding: 4px 10px;
    margin: 4px;
    border-radius: 8px;
    height: 32px; /* 进一步减小高度 */
  }
  
  .round-info {
    font-size: 12px;
  }
  
  .star-coins {
    font-size: 10px;
    padding: 2px 4px;
  }
  
  .star-coins .icon {
    font-size: 12px;
  }
  
  /* 小屏幕横屏星光币显示优化 */
  .star-coins.enhanced-coins {
    font-size: 9px; /* 小屏幕最小字体 */
    padding: 3px 6px;
    border-radius: 10px;
    gap: 2px;
    max-width: 50px; /* 小屏幕最紧凑 */
  }
  
  .coin-icon {
    font-size: 9px;
  }
  
  .coin-amount {
    font-size: 9px;
  }
  
  .first-player-info {
    padding: 3px 6px;
    font-size: 10px;
  }
  
  /* 头部按钮进一步缩小 */
  .rules-icon,
  .history-icon,
  .end-game-icon,
  .audio-icon,
  .music-icon {
    width: 26px;
    height: 26px;
  }
  
  .rules-icon span,
  .history-icon span,
  .end-game-icon span,
  .audio-icon span,
  .music-icon span {
    font-size: 14px;
  }
  
  /* AI玩家信息进一步压缩 */
  .ai-players-compact {
    padding: 3px 12px;
    gap: 8px;
  }
  
  .ai-avatar {
    font-size: 16px;
    width: 22px;
    height: 22px;
  }
  
  .ai-collected-badge {
    font-size: 7px;
    padding: 1px 2px;
    top: -2px;
    right: -2px;
    min-width: 10px;
  }
  
  .ai-name {
    font-size: 8px;
  }
  
  .ai-cards-count {
    font-size: 7px;
  }
  
  /* 出牌区域最小化 */
  .play-area {
    padding: 6px;
    min-height: 60px;
    flex: 0.6; /* 进一步减少 */
  }
  
  /* 手牌区域优化 - 给桌面更多空间 */
  .player-hand {
    padding: 8px 12px 16px;
    border-radius: 15px 15px 0 0;
    min-height: 90px; /* 减小最小高度，给桌面更多空间 */
    flex: 1.5; /* 减小手牌区域权重 */
  }
  
  .cards-container {
    gap: 6px;
    padding: 12px 0 4px; /* 小屏幕横屏也减小上边距 */
    min-height: 85px; /* 减小最小高度 */
  }
  
  /* 卡片尺寸保持清晰 */
  .card {
    width: 52px; /* 略微增加宽度 */
    height: 78px; /* 略微增加高度 */
    padding: 3px 2px;
  }
  
  .card-rank {
    font-size: 12px;
  }
  
  .card-symbol {
    font-size: 20px;
  }
  
  .card-name {
    font-size: 8px;
  }
  
  /* 操作按钮保持清晰 */
  .action-buttons {
    padding: 8px;
    gap: 14px; /* 增加间距 */
  }
  
  .btn {
    padding: 6px 12px;
    font-size: 12px;
    min-width: 70px;
    border-radius: 12px;
  }
  
  /* 收牌信息位置调整 */
  .player-collected-info {
    top: 6px;
    right: 12px;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
  }
  
  /* Toast提示适配 */
  .collect-toast {
    top: 35px;
    padding: 8px 12px;
    max-width: 75vw;
  }
  
  .toast-content {
    gap: 6px;
    margin-bottom: 6px;
  }
  
  .winner-badge {
    font-size: 16px;
  }
  
  .winner-name {
    font-size: 12px;
  }
  
  .collect-count {
    font-size: 10px;
  }
  
  .countdown-circle {
    width: 24px;
    height: 24px;
  }
  
  .countdown-number {
    font-size: 11px;
  }
  
  .toast-collect-btn {
    padding: 4px 8px;
    font-size: 11px;
  }
}

/* 更大横屏设备优化（如横屏平板） */
@media screen and (min-width: 768px) and (orientation: landscape) {
  .game-content {
    max-width: 100vw;
    max-height: 100vh;
    margin: auto;
  }
  
  /* 横屏平板AI玩家优化 */
  .ai-players-compact {
    top: 65px;
    padding: 6px 40px;
    gap: 15px;
  }
  
  .ai-avatar {
    font-size: 22px;
    width: 28px;
    height: 28px;
  }
  
  .ai-collected-badge {
    font-size: 9px;
    padding: 2px 4px;
  }
  
  .ai-name {
    font-size: 10px;
  }
  
  .ai-cards-count {
    font-size: 9px;
  }
  
  .other-players {
    top: 70px;
    padding: 0 40px;
  }
  
  .other-player {
    min-width: 90px;
    padding: 10px 12px;
  }
  
  .other-player .avatar {
    font-size: 28px;
  }
  
  .other-player .name {
    font-size: 12px;
  }
  
  .other-player .cards-count,
  .other-player .star-coins,
  .other-player .collected {
    font-size: 11px;
  }
  
  .play-area {
    min-height: 150px;
  }
  
  .cards-container {
    gap: 8px;
  }
}
</style>
